<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="model.Goods" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html>
<html>
<head>
  <title>在线商城系统</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../Front/style.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
  <!-- script
  ================================================== -->
  <script src="js/modernizr.js"></script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <jsp:include page="symol.jsp" />
</svg>

<!--搜索框-->
<div class="search-popup">
  <!-- 搜索弹出框容器 -->
  <jsp:include page="search.jsp" />
</div>
<!--头部-->
<header id="header" class="site-header header-scrolled position-fixed text-black bg-light">
  <!-- 头部开始，具有类名site-header、header-scrolled、position-fixed、text-black和bg-light -->
  <jsp:include page="header.jsp" />
  <!-- 导航条结束 -->
</header>

<section class="hero-section position-relative bg-light-blue padding-medium">
  <div class="hero-content">
    <div class="container">
      <div class="row">
        <div class="text-center padding-large no-padding-bottom">
          <h1 class="display-2 text-uppercase text-dark">购物</h1>
          <div class="breadcrumbs">
                <span class="item">
                  <a href="index.jsp">首页 ></a>
                </span>
            <span class="item">购物</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<div class="shopify-grid padding-large">
  <!-- 主容器，包含整个商店页面的内容 -->
  <div class="container">
    <!-- Bootstrap容器，包含行和列 -->
    <div class="row">
      <main class="col-md-9">
        <!-- 主内容区域，占用9个网格 -->
        <div class="filter-shop d-flex justify-content-between">
          <!-- 筛选和排序栏，使用Flexbox布局 -->
          <div class="showing-product">
            <!-- 显示产品数量信息 -->
            <p>Showing All Goods results</p>
          </div>
          <div class="sort-by">
            <!-- 排序下拉菜单 -->
            <select id="input-sort" class="form-control" data-filter-sort="" data-filter-order="">
              <option value="">默认排序</option>
            </select>
          </div>
        </div>


        <div class="product-content product-store d-flex justify-content-between flex-wrap">
          <!-- 产品列表容器，使用Flexbox布局并自动换行 -->

          <div class="row">

              <c:forEach var="goods" items="${goodsList}">
                <div class="col-lg-4 col-md-6">
                  <div class="product-card position-relative pe-3 pb-3">
                    <div class="image-holder">
                      <img src="${pageContext.request.contextPath}/${goods.goods_image}" alt="product-item" class="img-fluid" style="width:400px; height:400px" >
                    </div>
                    <div class="cart-concern position-absolute">
                      <div class="cart-button d-flex">
                        <div class="btn-left">
                          <form action="${pageContext.request.contextPath}/CartAddServlet.do" method="post">
                            <input type="hidden" name="action" value="add">
                            <input type="hidden" name="goods_id" value="${goods.goods_id}">
                            <input type="hidden" name="goods_price" value="${goods.goods_price}">
                            <input type="hidden" name="goods_info" value="${goods.goods_info}">
                            <input type="hidden" name="goods_image" value="${goods.goods_image}">
                            <button type="submit" class="btn btn-medium btn-black">加入购物车</button>
                          </form>



                        </div>
                      </div>
                    </div>
                    <div class="card-detail d-flex justify-content-between pt-3 pb-3">
                      <h3 class="card-title text-uppercase">
                        <a href="#">${goods.goods_info}</a>
                      </h3>
                      <span class="item-price text-primary">￥${goods.goods_price}</span>
                    </div>
                  </div>
                </div>
              </c:forEach>
                <nav class="navigation paging-navigation text-center padding-medium" role="navigation">
                  <div class="pagination loop-pagination d-flex justify-content-center align-items-center">
                    <a href="#">
                      <svg class="chevron-left pe-3">
                        <use xlink:href="#chevron-left"></use>
                      </svg>
                    </a>
                    <span aria-current="page" class="page-numbers current pe-3">1</span>
                    <a class="page-numbers pe-3" href="#">2</a>
                    <a class="page-numbers pe-3" href="#">3</a>
                    <a class="page-numbers pe-3" href="#">4</a>
                    <a class="page-numbers" href="#">5</a>
                    <a href="#">
                      <svg class="chevron-right ps-3">
                        <use xlink:href="#chevron-right"></use>
                      </svg>
                    </a>
                  </div>
                </nav>
      </main>
      <aside class="col-md-3">
        <div class="sidebar">
          <div class="widget-menu">
            <div class="widget-search-bar">
              <form role="search" method="get" class="d-flex" action="../ShopSearchServlet.do">
                <input class="search-field" placeholder="Search" type="search" name="goods_info">
                <div class="search-icon bg-dark">
                  <a href="#">
                    <svg class="search text-light">
                      <use xlink:href="#search"></use>
                    </svg>
                  </a>
                </div>

              </form>
            </div>
          </div>
          <div class="widget-product-categories pt-5">
            <h5 class="widget-title text-decoration-underline text-uppercase">类别</h5>
            <ul class="product-categories sidebar-list list-unstyled">
              <li class="cat-item">
                <a href="/collections/categories">所有</a>
              </li>
              <li class="cat-item">
                <a href="">手机</a>
              </li>
              <li class="cat-item">
                <a href="">饰品</a>
              </li>
              <li class="cat-item">
                <a href="">平板电脑</a>
              </li>
              <li class="cat-item">
                <a href="">手表</a>
              </li>
            </ul>
          </div>
          <div class="widget-product-tags pt-3">
            <h5 class="widget-title text-decoration-underline text-uppercase">标签</h5>
            <ul class="product-tags sidebar-list list-unstyled">
              <li class="tags-item">
                <a href="">白色</a>
              </li>
              <li class="tags-item">
                <a href="">便宜</a>
              </li>
              <li class="tags-item">
                <a href="">模型</a>
              </li>
              <li class="tags-item">
                <a href="">现代</a>
              </li>
            </ul>
          </div>
          <div class="widget-product-brands pt-3">
            <h5 class="widget-title text-decoration-underline text-uppercase">品牌</h5>
            <ul class="product-tags sidebar-list list-unstyled">
              <li class="tags-item">
                <a href="">苹果</a>
              </li>
              <li class="tags-item">
                <a href="">三星</a>
              </li>
              <li class="tags-item">
                <a href="">华为</a>
              </li>
            </ul>
          </div>
          <div class="widget-price-filter pt-3">
            <h5 class="widget-titlewidget-title text-decoration-underline text-uppercase">按价格筛选</h5>
            <ul class="product-tags sidebar-list list-unstyled">
              <li class="tags-item">
                <a href="">少于 $10</a>
              </li>
              <li class="tags-item">
                <a href="">$10- $20</a>
              </li>
              <li class="tags-item">
                <a href="">$20- $30</a>
              </li>
              <li class="tags-item">
                <a href="">$30- $40</a>
              </li>
              <li class="tags-item">
                <a href="">$40- $50</a>
              </li>
            </ul>
          </div>
        </div>
      </aside>
            </div>


      </main>
    </div>
</div>

<jsp:include page="footer.jsp"/>

<!-- 结束底部底部部分 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>